<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {getUnreadFeedbackCnt} from "@/request/mid_interface.js";

const router = useRouter();

const msg = ref("Hello")
const tabIndex = ref(0)
const msgNum = ref(0)

const isLogin = ref(false)

function confirmLogout() {
  localStorage.token = ""
}

function getLoginStatus() {
  if (!localStorage.token) {
    if (isLogin.value) {
      isLogin.value = false
    }
    if (location.href.indexOf("/login") === -1) {
      router.replace({
        path: "/login"
      })
    }
  } else {
    if (!isLogin.value) {
      isLogin.value = true
    }
    if (location.href.indexOf("/login") > -1) {
      router.replace({
        path: "/home"
      })
    }
  }
}

function getTabIndex() {
  const prefix = location.href.split("/")[location.href.split("/").length - 1]
  if (prefix === "home") {
    tabIndex.value = 0
  }
  if (prefix === "product") {
    tabIndex.value = 1
  }
  if (prefix === "feedback") {
    tabIndex.value = 2
  }
}

// const unreadCnt = ref(0)

function getUnreadCnt() {
  setInterval(async () => {
    if(localStorage.token) {
      const res = await getUnreadFeedbackCnt()
      msgNum.value = res["data"]
    }
  }, 1000)
}

function changeTabIndex(idx) {
  router.replace({
    path: ["home", "product", "feedback"][idx]
  })
}

onMounted(() => {
  getUnreadCnt()
  getLoginStatus()
  getTabIndex()
  setInterval(() => {
    getLoginStatus()
    getTabIndex()
  }, 100)
})

</script>

<template>
  <!--  <div class="px-5 my-3 mx-auto" style="max-width: 1400px">-->
  <!--    <h1 class="w-full bg-red-600" v-for="i in 1000">Hello World！</h1>-->
  <!--  </div>-->
  <div v-if="isLogin" class="w-full bg-white border-b box-border py-5 px-5">
    <div class="mx-auto flex items-center justify-between" style="max-width: 1350px">
      <div class="flex items-center">
        <!-- Logo -->
        <div class="flex items-center">
          <img class="w-12 h-12" src="@/assets/img/logo.jpg" alt="">
          <div class="ml-2">
            <div class="font-bold text-black" style="font-size: 16px">多彩周坡客户端</div>
            <div class="text-gray-500">管理后台</div>
          </div>
        </div>
        <!-- Tab按钮 -->
        <div class="flex items-center ml-14">
          <div :style="{
        background: tabIndex===0?'rgba(233,163,37,0.15)':'white',
        border: tabIndex===0?'#FCF1DE 1px solid':'#eee 1px solid',
        color: tabIndex===0?'#E9A325':'',
      }" @click="changeTabIndex(0)"
               class="select-none cursor-pointer px-6 py-2.5 font-medium text-gray-500 rounded-full">宣发图文
          </div>
          <div :style="{
      background: tabIndex===1?'rgba(233,163,37,0.15)':'white',
      border: tabIndex===1?'#FCF1DE 1px solid':'#eee 1px solid',
      color: tabIndex===1?'#E9A325':'',
      }" @click="changeTabIndex(1)"
               class="select-none cursor-pointer px-6 py-2.5 font-medium text-gray-500 rounded-full ml-3">
            商品销售
          </div>
          <div :style="{
        background: tabIndex===2?'rgba(233,163,37,0.15)':'white',
        border: tabIndex===2?'#FCF1DE 1px solid':'#eee 1px solid',
        color: tabIndex===2?'#E9A325':'',
      }" @click="changeTabIndex(2)"
               class="select-none cursor-pointer px-6 py-2.5 font-medium text-gray-500 rounded-full ml-3 relative">意见收集
            <div
                v-if="msgNum"
                class="absolute left-20 top-0 px-2 font-medium text-white bg-red-500 rounded-full translate-x-1.5 -translate-y-1">
              {{ msgNum }}
            </div>
          </div>
        </div>
      </div>
      <el-popconfirm @confirm="confirmLogout()" confirm-button-text="确认" confirm-button-type="info"
                     cancel-button-text="取消" title="是否退出登录">
        <template #reference>
          <div class="flex items-center cursor-pointer select-none">
            <div class="flex items-center">
              <div class="text-sm">已登录</div>
              <img class="w-3 ml-1" src="@/assets/img/arrow_down.svg" alt="">
            </div>
            <div class="px-2.5 py-2.5 bg-gray-100 rounded-full ml-5">
              <img class="w-6 h-6" src="@/assets/img/person.svg" alt="">
            </div>
          </div>
        </template>
      </el-popconfirm>
    </div>
  </div>

  <div v-else class="w-full bg-white border-b box-border py-5 px-5 flex items-center justify-center">
    <div class="flex items-center">
      <!-- Logo -->
      <div class="flex items-center">
        <img class="w-12 h-12" src="@/assets/img/logo.jpg" alt="">
        <div class="ml-2">
          <div class="font-bold text-black" style="font-size: 16px">多彩周坡客户端</div>
          <div class="text-gray-500">管理后台</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>
